import React from 'react'
import {connect} from 'react-redux'

import ReactDOM from 'react-dom'

import {PullToRefresh, ListView,} from "antd-mobile";
import FootballGameCard from "../FootballGameCard/FootballGameCard";

const data = [
    {
        img: 'https://zos.alipayobjects.com/rmsportal/dKbkpPXKfvZzWCM.png',
        title: 'Meet hotel',
        des: '不是所有的兼职汪都需要风吹日晒',
    },
    {
        img: 'https://zos.alipayobjects.com/rmsportal/XmwCzSeJiqpkuMB.png',
        title: 'McDonald\'s invites you',
        des: '不是所有的兼职汪都需要风吹日晒',
    },
    {
        img: 'https://zos.alipayobjects.com/rmsportal/hfVtzEhPzTUewPm.png',
        title: 'Eat the week',
        des: '不是所有的兼职汪都需要风吹日晒',
    },
];
const NUM_ROWS = 20;
let pageIndex = 0;
function genData(pIndex = 0) {
    const dataArr = [];
    for (let i = 0; i < NUM_ROWS; i++) {
        dataArr.push(`row - ${(pIndex * NUM_ROWS) + i}`);
    }
    return dataArr;
}

class ListWithPull extends React.Component {

    constructor(props) {
        super(props)
        const dataSource = new ListView.DataSource({
            rowHasChanged: (row1, row2) => row1 !== row2,
        })

        this.state = {
            dataSource,
            refreshing: false,
            isLoading: false,
            height: document.documentElement.clientHeight,
            // useBodyScroll: false,
        }
    }

    // componentDidUpdate() {
    //     if (this.state.useBodyScroll) {
    //         document.body.style.overflow = 'auto';
    //     } else {
    //         document.body.style.overflow = 'hidden';
    //     }
    // }
    componentDidUpdate(prevProps, prevState, snapshot) {

    }

    componentDidMount() {
        const hei = this.state.height - ReactDOM.findDOMNode(this.lv).offsetTop
        this.setState({
            dataSource: this.state.dataSource.cloneWithRows(this.props.games[this.props.today]),
            height: hei,
        })
    }

    onRefresh = async () => {
        this.setState({ refreshing: true, isLoading: true })
        const fetchFinished = await this.props.fetchToday()
        if (fetchFinished) {
            this.setState({ refreshing: false })
        }
    };

    onEndReached = async (event) => {
        // load new data
        // hasMore: from backend data, indicates whether it is the last page, here is false
        if (this.state.isLoading && !this.state.hasMore) {
            return
        }
        this.setState({ isLoading: true })
        setTimeout(() => {
            // this.rData = [...this.rData, ...genData(++pageIndex)];
            this.setState({
                // dataSource: this.state.dataSource.cloneWithRows(this.rData),
                isLoading: false,
            })
        }, 1000)
        const fetchFinished = await this.props.fetchPrevDay()
        if (fetchFinished) {
            this.setState({
                isLoading: true,
            })
        }
    };

    render() {
        const separator = (sectionID, rowID) => (
            <div
                key={`${sectionID}-${rowID}`}
                style={{
                    background: 'transparent',
                    height: 8,
                }}
            />
        )

        const row = (rowData, sectionID, rowID) => {
            const game = rowData
            return <FootballGameCard game={game}/>
        }

        return (<div>
            <ListView
                // key={this.state.useBodyScroll ? '0' : '1'}
                ref={el => this.lv = el}
                dataSource={this.state.dataSource}
                // renderHeader={() => <span>Pull to refresh</span>}
                // renderFooter={() => (<div style={{ padding: 30, textAlign: 'center' }}>
                //     {this.state.isLoading ? 'Loading...' : 'Loaded'}
                // </div>)}
                renderRow={row}
                // renderSeparator={separator}
                // useBodyScroll={this.state.useBodyScroll}
                style={{height: this.state.height,}}
                pullToRefresh={<PullToRefresh
                    refreshing={this.state.refreshing}
                    onRefresh={this.onRefresh}
                />}
                onEndReached={this.onEndReached}
                pageSize={5}
            />
        </div>);
    }
}

const mapState = (state) => ({
    games: state.game.games,
    today: state.game.today,
})


export default connect(mapState)(ListWithPull)
